<!doctype html>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: Grouping switch</title>

  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/tree/compat/style.css" media="screen" />
  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/table/vista/style.css" media="screen" />
  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/menu/default/style.css" media="screen" />

  <style type="text/css" id="demo-css">
    HTML,
    BODY
    {
      font-size: small;
      font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    .Demo-Section
    {
      width: 300px;
      float: left;
      border-right: 1px solid #EEE;
      margin-right: 10px;
      padding-right: 10px;
    }

    .Basis-Tree
    {
      border: 1px solid #AAA;
      height: 400px;
      overflow: auto;
      overflow-y: scroll;
      overflow-x: hidden;
    }

    #demo-changeGroupingList
    {
      margin: .5em 0;
    }
  </style>
  <!--[if lt IE 7]>
  <style type="text/css">
    BODY
    {
      font-size: x-small;
    }
  </style>
  <![endif]-->

  <!--[if IE 7]>
  <![endif]-->


  <script type="text/javascript" src="../../basis-all.js"></script>

  <script type="text/javascript" src="../demo.js"></script>
</head>

<body>
  <h1>Basic demos: Grouping switch</h1>
  
  <p id="demo-summary">
    ..
  </p>
  <div id="demo-description">
    ..
  </div>

  <div id="demo-container"><div id="demo-changeGroupingList">Choose grouping: </div></div>

  <script type="text/javascript" id="demo-javascript">
    
    // make shortcut
    var Data = basis.data;
    var DOM = basis.dom;
    var nsTree = basis.ui.tree;
    var nsTable = basis.ui.table;
    var nsForm = basis.ui.form;

    // data
    var data = [
      { data: { title: 'Lorem', content: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.' } },
      { data: { title: 'Sed', content: 'Sed metus nibh, sodales a, porta at, vulputate eget, dui.' } },
      { data: { title: 'Pellentesque', content: 'Pellentesque ut nisl.' } },
      { data: { title: 'tortor', content: 'Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.' } },
      { data: { title: 'Letters from A to Z', content: 'abcdefghijklmnopqrstuvwxyz' } }
    ].repeat(3);

    //
    // Create controls
    //

    var demoContainer = DOM.get('demo-container');

    var tree = new nsTree.Tree({
      childNodes: data
    });

    var table = new nsTable.Table({
      childNodes: data,
      structure: [
        { header: 'Title', body: Function.getter('data.title') },
        { header: 'Content', body: Function.getter('data.content') }
      ]
    });

    // insert controls to document
    DOM.insert(demoContainer, DOM.wrap([
      tree.element,
      table.element
    ], { '.Demo-Section': Function.$true }));

    var groupigList = new nsForm.RadioGroup({
      container: DOM.get('demo-changeGroupingList'),
      event_change: function(){
        nsForm.RadioGroup.prototype.event_change.call(this);

        var grouping = this.getValue();
        tree.setGrouping(grouping);
        table.setGrouping(grouping);
      },
      childNodes: [
        {
          selected: true,
          title: 'No grouping',
          value: null
        },
        {
          title: 'Group by title',
          value: 'data.title'
        },
        {
          title: 'Group by first letter',
          value: {
            groupGetter: 'data.title.charAt(0)',
            sorting: 'data.title',
            childClass: {
              binding: {
                title: Function.getter('data.title', 'Group for letter <{0}>')
              }
            }
          }
        }
      ]
    });

  </script>
</body>

</html>
